<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 什么是伪元素？很像元素，但不是元素，是元素中的一些特殊位置 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }

        div::first-line {
            background-color: yellow;
        }

        div::selection {
            background-color: green;
            color: orange;
        }

        input::placeholder {
            color: aquamarine;
        }

        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content: "¥";
        }

        /* 选中的是p元素最后面的位置，随后创建一个子元素 */
        p::after {
            content: "元";
        }
    </style>
</head>
<body>

    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio illo nam, adipisci consequatur sed impedit iste quam perspiciatis quidem illum fugiat. Odio error impedit eveniet excepturi provident eum autem quia numquam architecto? Expedita incidunt ullam quos velit amet doloribus maxime magni officia magnam est molestiae corrupti eius autem quia dolore reiciendis, a et, aliquam neque temporibus sunt cum deserunt molestias.</div>
    <input type="text", placeholder="请输入用户名">
    <p>199.00</p>
    <p>199.00</p>
    <p>199.00</p>
    <p>199.00</p>


</body>
</html>